<template>
    <div>
        <h1>setup</h1>
        <div>
            <p>{{ aaa }}</p>
            <hr />

            <div>
                <h3>ref</h3>
                <p>bbb: {{ bbb }}</p>
                <p>ccc: {{ ccc }}</p>
                <button @click="fun_add">+++</button>
            </div>
            <hr />

            <div>
                <h3>reactive</h3>
                <p v-if="ddd.aaa">pass: {{ ddd.aaa }}</p>
                <p>user: {{ ddd.user }}</p>
                <p>pass: {{ ddd.pass }}</p>
                <p>job: {{ ddd.job }}</p>
                <button @click="fun_change">修改定义的变量</button>
                <button @click="fun_change_this">修改this的变量</button>
            </div>
            <hr />

            <div>
                <h3>ref也可以放入对象</h3>
                <p>{{ eee }}</p>
                <button @click="fun_change_eee">修改eee</button>
            </div>
        </div>

        <hr />
        <hr />

        <h1>父子组件传参</h1>
        <p>父组件：{{ ccc }}</p>
        <child :bbb="bbb" :ccc="ccc" @get_ccc="get_ccc"></child>
    </div>
</template>

<script lang="">
	import { defineComponent, ref, reactive } from 'vue'
	import child from './child.vue'
	export default defineComponent({
		components: { 
			child
		},
		setup(){
			// setup 在 beforCreate 之前执行，当前组件还没创建
			// setup 和 data 函数中的属性会合并
			// setup 和 methds 函数中的方法会合并
			// setup 不能访问 data 和 methds 中的内容
			// setup 不能是一个 async
			
			// return 外定义变量可以直接再 return 内使用，直接修改变量无法响应刷新，需要使用 ref 或 this.xxx = xxxx
			let aaa = 'return 外定义变量可以直接在 return 内使用，直接修改变量无法响应刷新，需要使用 ref 或 this.xxx = xxxx';
			
			// ref：定义一个响应式数据，返回的是一个 ref 对象，操作对象需要调用 value，html不需要使用 value
			// 一般用来定义一个基本类型的响应式数据
			let bbb = 1
            let ccc = ref(1)
			function fun_add(){
				// this.aaa = this.aaa + 1
				this.bbb++;
				ccc.value++
			}
			
			// reactive：响应式对象，返回的是一个 proxy 的代理对象
			// 修改对象只能修改对象的属性，不能重新给对象赋值
			let ddd = reactive({
				user: 111111111,
				job: '你大爷'
			})
			function fun_change(){
				console.log( ddd )
				ddd.user = 44444444
				ddd.aaa = '新增'
				ddd.pass = ddd.pass ? ddd.pass + 1 : 1
				delete ddd.job		// 删除对象的属性
			}
			function fun_change_this(){
				this.ddd.user = 333333333
				this.ddd.aaa = '新增'
				this.ddd.pass = this.ddd.pass ? this.ddd.pass + 1 : 1
				delete ddd.job
			}
			
			
			// ref 中如果放入一个对象，默认经过reactive，形成一个 proxy 类型的对象
			// 可以给对象重新赋值
			let eee = ref({
				name: '你大爷',
				age: 111,
				job: {
					name: '前端'
				},
			})
			function fun_change_eee(){
				eee.value.name += 0
				eee.value.job.name += 2
				eee.value.sex = '男'
				delete eee.value.age
				// eee.value = { }
				console.log( eee.value );
			}
			
			// 接受子组件传参
			function get_ccc(e){
				ccc.value+=e
			}
			
			return {
				aaa: aaa,
				bbb,
				ccc,
				ddd,
				eee,
				
				fun_add,
				fun_change,
				fun_change_this,
				fun_change_eee,
				get_ccc
			}
		},
	})
</script>

<style lang="scss" scoped>
</style>
